<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition.html</title>
</head>
<style>
#an1, #an2, #an3, #an4, #an5{
	padding:10px;
	width:100px;
	border:2px solid #aaaaaa;
	text-align:center;
	margin:6px;
	border-radius:5px;
	box-shadow:2px 2px 6px #bbbbbb;
	-webkit-transition:background 2s, -webkit-transform 1s;

}
#an1:hover, #an2:hover, #an3:hover, #an4:hover, #an5:hover{
	background-color:#ffff00;
	-webkit-transform:rotate(8deg);
	-webkit-transition:background 2s, -webkit-transform 1s;
}


</style>
<body>

<div id='an1'>Animation1</div>
<div id='an2'>Animation2</div>
<div id='an3'>Animation3</div>
<div id='an4'>Animation4</div>
<div id='an5'>Animation5</div>

</body>
</html>